<script setup lang="ts">
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  return {
    towns: [
      {
        name: '河口镇',
        data: [
          { name: '农林牧渔', value: 100 },
          { name: '生态能源', value: 95 },
          { name: '水资源', value: 80 },
          { name: '水源涵养', value: 75 },
          { name: '土壤保持', value: 65 },
          { name: '洪水调蓄', value: 60 },
          { name: '空气净化', value: 55 },
          { name: '水质净化', value: 50 },
          { name: '固碳价值', value: 45 },
          { name: '释氧价值', value: 40 },
          { name: '气候调节', value: 35 },
          { name: '负氧离子', value: 30 },
          { name: '生物多样性保护', value: 25 },
          { name: '噪音消减', value: 20 },
          { name: '旅游康养', value: 15 },
          { name: '休闲游憩', value: 10 },
          { name: '景观增值', value: 5 }
        ]
      },
      {
        name: '永平镇',
        data: [
          { name: '农林牧渔', value: 95 },
          { name: '生态能源', value: 80 },
          { name: '水资源', value: 75 },
          { name: '水源涵养', value: 65 },
          { name: '土壤保持', value: 60 },
          { name: '洪水调蓄', value: 55 },
          { name: '空气净化', value: 50 },
          { name: '水质净化', value: 45 },
          { name: '固碳价值', value: 40 },
          { name: '释氧价值', value: 35 },
          { name: '气候调节', value: 30 },
          { name: '负氧离子', value: 25 },
          { name: '生物多样性保护', value: 20 },
          { name: '噪音消减', value: 15 },
          { name: '旅游康养', value: 10 },
          { name: '休闲游憩', value: 5 },
          { name: '景观增值', value: 0 }
        ]
      },
      // ... 其他乡镇数据
    ]
  };
};


// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);

const currentTownIndex = ref(0);
const currentTownName = ref('');

// 定义一个异步函数来渲染柱状图
const renderBarChart = async () => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    const data = await fetchData();
    const towns = data.towns;

    const maxDataValue = Math.max(
      ...towns.flatMap(town => town.data.map(item => item.value))
    );

    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: towns[currentTownIndex.value].data.map(item => item.name),
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: towns[currentTownIndex.value].data.map(item => item.name),
        axisLabel: {
          rotate: 30,
          interval: 0,
          margin: 8
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: maxDataValue,
        interval: 5,
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [
        {
          name: towns[currentTownIndex.value].name,
          type: 'bar',
          data: towns[currentTownIndex.value].data.map(item => item.value),
          barWidth: '60%',
          color: '#2f4b7c'
        }
      ]
    };

    chart.setOption(option);

    setInterval(() => {
      currentTownIndex.value = (currentTownIndex.value + 1) % towns.length;
      currentTownName.value = towns[currentTownIndex.value].name;
      chart.setOption(option);
    }, 3000);
  }
};


// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderBarChart();
  }, 200);
});
</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%; border: 1px red solid"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
